/* 全局样式重置 */
* {
  margin: 0; /* 移除所有元素的默认外边距 */
  padding: 0; /* 移除所有元素的默认内边距 */
  box-sizing: border-box; /* 设置盒模型为border-box，padding和border不会增加元素宽度 */
}

/* 页面主体样式 */
body {
  min-height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}

/* 页面标题样式 */
.page-title {
  color: #333; /* 设置文字颜色 */
  margin-bottom: 2.5rem; /* 设置下边距 */
  font-size: 2.2rem; /* 设置字体大小 */
  text-align: center; /* 设置文本对齐方式 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 设置文字阴影 */
}

/* 游戏容器样式 */
.game-container {
  display: flex; /* 使用弹性布局 */
  flex-wrap: wrap; /* 允许项目换行 */
  gap: 2rem; /* 设置项目之间的间距 */
  justify-content: center; /* 设置主轴对齐方式为居中 */
  width: 100%; /* 设置宽度为100% */
  max-width: 800px; /* 设置最大宽度 */
}

/* 游戏卡片样式 */
.game-card { height: 120px; width: 250px; border: 1px solid #eef2f6; border-radius: 12px; margin: 0; display: flex; justify-content: center; align-items: center; background-color: white; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; position: relative; overflow: hidden; }

/* 游戏卡片悬停时的光效 */
.game-card::before {
  content: ""; /* 设置内容为空 */
  position: absolute; /* 设置绝对定位 */
  top: 0; /* 定位在顶部 */
  left: -100%; /* 初始位置在左侧外面 */
  width: 100%; /* 设置宽度 */
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(127, 255, 212, 0.2),
    transparent
  ); /* 设置渐变背景 */
  transition: all 0.5s ease; /* 设置过渡效果 */
}

/* 游戏卡片悬停时的光效动画 */
/* 游戏卡片悬停效果 - 伪元素动画 */
.game-card:hover::before {
  left: 100%;
}

/* 游戏卡片链接样式 */
.game-card a {
  text-decoration: none; /* 移除下划线 */
  color: #333; /* 设置文字颜色为深灰色 */
  font-size: 1.2rem; /* 设置字体大小 */
  font-weight: 500; /* 设置字体粗细 */
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 0.8rem; /* 设置元素间距 */
  padding: 1rem; /* 设置内边距 */
  z-index: 1; /* 设置层级 */
  transition: color 0.3s ease; /* 颜色变化过渡效果 */
}

/* 游戏卡片图标样式 */
.game-card i {
  font-size: 1.5rem; /* 设置图标大小 */
  color: #4a90e2; /* 设置图标颜色 */
  transition: transform 0.3s ease; /* 图形变换过渡效果 */
}

/* 游戏卡片悬停效果 */
.game-card:hover { background-color: #f0fbff; transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }

/* 游戏卡片链接悬停效果 */
.game-card:hover a {
  color: #2c3e50; /* 设置悬停时的文字颜色 */
}

/* 游戏卡片图标悬停效果 */
.game-card:hover i {
  transform: scale(1.2) rotate(5deg); /* 放大1.2倍并旋转5度 */
}

/* 响应式布局 - 适配移动设备 */
@media (max-width: 600px) {
  /* 页面标题样式调整 */
  .page-title {
    font-size: 1.8rem; /* 调整字体大小 */
    margin-bottom: 1.5rem; /* 调整下边距 */
  }

  /* 游戏卡片样式调整 */
  .game-card {
    width: 100%; /* 宽度占满容器 */
    max-width: 300px; /* 最大宽度限制 */
  }
}
